<template>
  <div style="background: #f4f4f5">快照页面</div>
  <el-card class="box-card">
    <el-descriptions :title="resource.resourceNo + '--' + resource.resourceName">
      <el-descriptions-item label="所在城市">{{ cityToStr(resource.city) }}</el-descriptions-item>
      <el-descriptions-item label="所在地址">{{ resource.address }}</el-descriptions-item>
      <el-descriptions-item label="负责人电话">{{ resource.phone }}</el-descriptions-item>
      <el-descriptions-item>
        <el-button @click="" plain type="primary">客服咨询</el-button>
        <el-button @click="$router.push(`/user/detail/${productTypeStr[resource.productType]}/${resource.resourceId}`)" plain type="primary">查看当前商品</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-affix :offset="0" style="text-align: left;background: #ffffff">
    <div style="padding: 10px">产品介绍</div>
    <el-divider style="margin: 0"/>
  </el-affix>
  <div v-html="content"></div>

</template>
<script>
export default {name:"SnapshotDetail"}
</script>
<script setup>
import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
import {useRoute} from "vue-router";
import axios from "~/config/axios.js";
import {ElLoading, ElMessage} from 'element-plus'
import {cityToStr} from "~/config/utils.js";
import {productTypeStr} from "~/config/const.js";

const snapshot = ref({})
const resource = ref({})
const resourceId = useRoute().params.id
const content = ref({})


onBeforeMount(async () => {
  const loading = ElLoading.service()
  snapshot.value = await axios.get(`/snapshot/${resourceId}`);
  resource.value = snapshot.value.json
  content.value = await axios.get(`/introduce/${resource.value.introduceId}`);
  loading.close();
})


</script>

<style>
.el-affix--fixed {
  background: #ffffff;
  width: 100%
}

.sss {
  height: 80%;
  overflow-y: auto;
}

.el-col-25 {
  width: 20%;
  text-align: center;
}
</style>